<template>
  <div class="header">
    <div class="left">
      <slot name="left"></slot>
    </div>

    <slot name="center">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#4285f4">
        <el-menu-item v-for="(item, index) in menus" :key="index" :index="item.route" @click="handleSelect(item)">
          {{ item.name }}
        </el-menu-item>
      </el-menu>
    </slot>

    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "HeaderPage",
  props: {
    menus: {
    },
    index: {
    }
  },
  data() {
    return {
      activeIndex: '/homePage',
    };
  },
  methods: {
    handleSelect(item) {
      if (this.$route.path != item.route) {
        this.activeIndex = item.route;
        this.$router.push({ path: item.route });
      }
    }
  },
}
</script>

<style scoped lang="less">
.header {
  display: flex;

  justify-items: center;
  align-items: center;
  text-align: center;
  .left{
    min-width: fit-content;
  }
  .right{
    float: right;
  }
}
</style>
